<template>
    <el-card>
        <!-- 搜索查询 -->
        <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
            <el-form-item label="用户名">
                <el-input v-model="state.queryForm.name" placeholder="输入用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <BTButton :label="$t('query')" perms="sys:role:view" type="primary" @click="getDataList()" />
            </el-form-item>
            <el-form-item>
                <BTButton :label="$t('add')" perms="sys:role:view" type="primary" @click="addOrUpdateHandle()" />
            </el-form-item>
        </el-form>
    </el-card>
    <!-- 列表 -->
    <el-card>
        <BTTable permsEdit="sys:user:edit" permsDelete="sys:user:delete" :data="dataList" :columns="filterColumns"
            @handleEdit="handleEdit" @handleDelete="handleDelete" />
    </el-card>
    <!-- 分页 -->
    <el-card>
        <BTPagination v-if="totalSize > 0" :pageNum="pageNum" :pageSize="pageSize" :totalSize="totalSize"
            @currentChange="currentChangeHandle" />
    </el-card>
</template>
<script lang="ts" setup>
import { reactive, ref, onBeforeMount } from 'vue';
import { useI18n } from 'vue-i18n';
import BTButton from '@/components/Core/BTButton.vue';
import BTTable from '@/components/Core/BTTable.vue';
import BTPagination from '@/components/Core/BTPagination.vue';
import { findPage, deleteUser } from '@/api/user';
import { ElMessage, ElMessageBox } from 'element-plus';
const state = reactive({
    queryForm: {
        name: ''
    }
});

const columns = ref([
    { prop: "id", label: "ID" },
    { prop: "name", label: "用户名" },
    { prop: "deptName", label: "机构" },
    { prop: "roleNames", label: "角色" },
    { prop: "email", label: "邮箱" },
    { prop: "mobile", label: "手机" },
    { prop: "status", label: "状态" },
]);
const filterColumns = ref();
filterColumns.value = JSON.parse(JSON.stringify(columns.value));
const dataList = ref([]);
const pageNum = ref(1);
const pageSize = ref(5);
const totalSize = ref(0);
onBeforeMount(async () => {
    inintData();
});

const inintData = async () => {
    const params = {} as any;
    params.pageNum = pageNum.value;
    params.pageSize = pageSize.value;
    params.params = {
        name: state.queryForm.name
    };
    const res: any = await findPage(params);
    console.log(res, "=========");
    if (res.code === 200) {
        dataList.value = res.data.content;
        totalSize.value = Number(res.data.totalSize);
    }
}

const currentChangeHandle = (page: any) => {
    pageNum.value = page;
    inintData();
}
//查询
const getDataList = () => {
    pageNum.value = 1;
    inintData();
}

//新增
const addOrUpdateHandle = () => {

}

//编辑
const handleEdit = () => {

}

//删除
const handleDelete = (row: any) => {
    ElMessageBox.confirm(
        `确认删除用户名为${row.name}吗？`,
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let params = [] as any;
            let idArray = (row.id + '').split(',')
            for (var i = 0; i < idArray.length; i++) {
                params.push({ 'id': idArray[i] })
            }
            const res: any = await deleteUser(params);
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功！',
                })
                inintData();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.msg,
                })
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除失败！',
            })
        })
}
</script>
<style scoped lang="scss"></style>